<template>
	<div>
		<!-- 订单类型头部 -->
		<div id="order_status_container">
			<span v-for="(type,i) in orderTypes"
			:key="i"
			 :class="{colored: currentType == i + 1}"
			 @click="clickType(i)">{{type}}</span>
		</div>
		<!-- 订单列表部分 -->
		<div style="margin-top: .9rem">
			<div v-for="(list,i) in orderList" :key="i">
				<div class="c-txt order-header">
					<div class="fl">订单号：{{list.order_info.order_no}}</div>
					<div class="fr">{{status[list.order_info.status].title}}</div>
				</div>
				<OrderItem type="orderList" :item="list.goods_info" :order="list.order_info"></OrderItem>
				<div class="c-txt textRight order-bottom">
                    <div v-if="!list.order_info.is_virtual">
                        <div class="c-btn" v-for="(a,i) in status[list.order_info.status].actions"
                        :key="i"
                        @click = "clickActions(a, list.order_info.order_id)">
                            {{actions[a].title}}
                        </div>
                    </div>
				</div>
			</div>
		</div>
		<!-- loading提示 -->
		<TipSet :nothingTip = "!orderList.length && !ajaxing"
			:middleLoadingTip = "ajaxing && page === 1"
			:bottomLoadingTip = "ajaxing && page > 1"
			:allLoadedTip = "allLoaded && orderList.length"></TipSet>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { Indicator, MessageBox, Toast } from 'mint-ui'
import { loadMore, utcToDate, handleHistory } from '@/assets/js/utils.js'
import TipSet from '@/components/TipSet'
import OrderItem from './OrderItem'
import WxLogin from '@/api/wxlogin'
export default{
	name:'Order',
	async created(){
		this.currentType = this.$route.query.type
		this.getData()
		this.loadMore = new loadMore({cb: this.nextPage})
	},
	data(){
		return{
			page: 1,
			loadMore: '',
			currentType: 1,
			// 实际type的值 == 该数组序列+1
			orderTypes:['全部', '待付款', '待发货', '待收货', '待评价']
		}
	},
	computed:{
		...mapGetters({
			orderList: 'order/list',
			status: 'order/orderStatus',
			actions: 'order/orderActions',
			ajaxing: 'order/ajaxing',
			allLoaded: 'order/allLoaded',
		})
	},
	methods:{
		...mapActions({
			getOrderList: 'order/getOrderList',
			cancleOrder: 'order/toCancleOrder',
			confirmOrder: 'order/toConfirmOrder',
			payOrder: 'pay/payOrder',
		}),
		async nextPage(){
			this.page++
			await this.getData()
		},
		async getData(){
			await this.getOrderList({page: this.page, type: this.currentType})
			this.loadMore.loading = false
			this.$nextTick(() => {
				if(document.body.scrollHeight > window.innerHeight && this.page == 1)
					this.loadMore.open()
				else if(this.allLoaded)
					this.loadMore.close()
			})
		},
		clickType(typeIndex) {
			this.currentType = typeIndex + 1
			this.page = 1
			this.loadMore.close()
			this.$store.commit('order/reset')
			this.getData()
		},
		async clickActions(action, orderId) {
			switch(action) {
				case 'pay':
					Indicator.open()
                    const {success, msg} = await this.payOrder({orderId: orderId, type: 2, router: this.$router})
                    Indicator.close()
                    if(!success) alert(msg)
					break
				case 'cancle':
					try{
						await MessageBox.confirm('确定取消吗？')
						Indicator.open();
                        const {success, msg} = await this.cancleOrder(orderId)
                        if(!success) Toast(msg)
						Indicator.close();
					} catch(err) {
						// 关闭confirm
					}
					break
				case 'delivery':
					break
				case 'confirm':
					try{
						await MessageBox.confirm('收到货啦？')
						Indicator.open();
                        const {success, msg} = await this.cancleOrder(orderId)
                        if(!success) Toast(msg)
						Indicator.close();
					} catch(err) {
						// 关闭confirm
					}
					break
				case 'comment':
					this.$router.push(`/order/detail/${orderId}`)
                    break
                case 'refund':
					this.$router.push(`/order/detail/${orderId}`)
					break
			}
		}
	},
	beforeDestroy(){
		Indicator.close()
		this.loadMore.close()
		this.$store.commit('order/reset')
	},
	components: {OrderItem, TipSet}
}
</script>
<style lang='less' scoped>
#order_status_container{
	width: 100%;
	height: .8rem;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 2;
	border-bottom: 1px solid #d8d3d3;
	span{
		width: 20%;
		display: inline-block;
		text-align: center;
		height: .8rem;
		line-height: .8rem;
		font-size: .32rem;
	}
}
.order-header,.order-bottom{
	width: 100%;
	height: .85rem;
	line-height: .85rem;
	padding: 0 .53rem 0 .2rem;
	background: #fff;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
}
.order-bottom .c-btn{
	margin-left: .3rem;
	&:last-of-type{
		color: #fb4a4a;
		border-color: #fb4a4a;
	}
}
</style>
<style lang="less">

</style>
